<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="box-card">
          <div class="app-container-header">
            <el-input v-model="parentForm.blurry" placeholder="请输入大类名称" class="input-with-select">
              <el-button slot="append" icon="el-icon-search" @click="query" />
            </el-input>
          </div>
          <div class="app-container-button">
            <el-button
              class="filter-item"
              size="mini"
              type="primary"
              icon="el-icon-plus"
              @click="toParentAdd"
            >
              新增
            </el-button>
            <el-button
              class="filter-item"
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="toParentDelete"
            >
              删除
            </el-button>
          </div>
          <div class="app-container-table">
            <el-table
              ref="table"
              v-loading="parentLoading"
              :data="dataList"
              highlight-current-row
              style="width: 100%;"
              @selection-change="selectionParentChangeHandler"
              @row-click="parentRowClick"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column :show-overflow-tooltip="true" width="200" prop="title" label="名称" />
              <el-table-column
                label="操作"
                width="130px"
                align="center"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-button size="mini" type="primary" icon="el-icon-edit" @click="toParentEdit(scope.row)" />
                  <el-button type="danger" icon="el-icon-delete" size="mini" @click="toParentDelete(scope.row)" />
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              :current-page="parentForm.page"
              :page-size="parentForm.size"
              :total="parentPagerSize"
              style="margin-top: 8px;"
              layout="total, prev, pager, next, sizes"
              @current-change="handleParentCurrentChange"
              @size-change="handleParentSizeChange"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="box-card">
          <div class="app-container-header">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-alert
                  style="padding: 0px"
                  :title="change === ''? '所属大类：':'所属大类：'+ change"
                  type="success"
                  :closable="false"
                />
              </el-col>
              <el-col :span="12">
                <el-input v-model="form.blurry" placeholder="请输入大类名称" class="input-with-select">
                  <el-button slot="append" icon="el-icon-search" @click="childQuery" />
                </el-input>
              </el-col>
            </el-row>
          </div>
          <div class="app-container-button">
            <el-button
              class="filter-item"
              size="mini"
              type="primary"
              icon="el-icon-plus"
              @click="toAdd"
            >
              新增
            </el-button>
            <el-button
              class="filter-item"
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="Delete"
            >
              删除
            </el-button>
          </div>
          <div class="app-container-table">
            <el-table
              ref="table"
              v-loading="loading"
              :data="childList"
              highlight-current-row
              style="width: 100%;"
              @selection-change="selectionChangeHandler"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column :show-overflow-tooltip="true" prop="title" label="名称" />
              <el-table-column
                label="操作"
                width="200px"
                align="center"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-button size="mini" type="primary" icon="el-icon-edit" @click="toEdit(scope.row)" />
                  <el-button size="mini" type="success" icon="el-icon-s-tools" @click="serviceAdd(scope.row)" />
                  <el-button type="danger" icon="el-icon-delete" size="mini" @click="Delete(scope.row)" />
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              :current-page="form.page"
              :page-size="form.size"
              :total="pagerSize"
              style="margin-top: 8px;"
              layout="total, prev, pager, next, sizes"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <entity ref="entity" @fetch-data="fetchData" />
    <fwfl-service ref="service" @fetch-data="fetchData" />
  </div>
</template>
<script>
import entity from '@/views/system/fwlx/entity'
import FwflService from '@/views/system/fwlx/service'
import { queryAllByPager, deleteEntity } from '@/api/fwfl/index'
export default {
  name: 'FwlxIndex',
  components: { entity, FwflService },
  data() {
    return {
      parentPagerSize: 0,
      pagerSize: 0,
      change: '',
      parentForm: {
        blurry: '',
        page: 1,
        size: 10,
        lb: 1
      },
      form: {
        blurry: '',
        page: 1,
        size: 10,
        lb: 2
      },
      parentLoading: false,
      loading: false,
      dataList: [],
      childList: [],
      rowIds: [],
      rowChildIds: []
    }
  },
  created() {
    this.initParent()
  },
  methods: {
    childQuery() {
      this.form.page = 1
      this.initChild()
    },
    query() {
      this.parentForm.page = 1
      this.initParent()
    },
    toParentAdd() {
      this.$refs.entity.openEntity({ lb: 1 })
    },
    toAdd() {
      if (this.form.pid !== null && undefined !== this.form.pid) {
        this.$refs.entity.openEntity({ lb: 2, pid: this.form.pid })
      } else {
        this.$message.error('请选择服务大类！')
      }
    },
    toParentDelete(data) {
      if (data.id !== null && undefined !== data.id) { // 单个删除
        this.rowIds = []
        this.rowIds.push(data.id)
        this.$confirm('此操作将永久删除' + data.title + ', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteEntity(this.rowIds).then(res => {
            this.$message.success('删除成功！')
            this.initParent()
            this.rowIds = []
          }).catch(() => {
            this.$message.error('删除失败！')
          })
        }).catch(() => {
          this.$message.success('取消删除成功！')
        })
      } else {
        if (this.rowIds === null || this.rowIds.length === 0) {
          this.$message.info('请选择删除项！')
        } else {
          this.$confirm('此操作将永久删除选中记录，是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            deleteEntity(this.rowIds).then(res => {
              this.$message.success('删除成功！')
              this.initParent()
              this.rowIds = []
            }).catch(() => {
              this.$message.error('删除失败！')
            })
          }).catch(() => {
            this.$message.success('取消删除成功！')
          })
        }
      }
    },
    selectionParentChangeHandler(val) {
      if (val === null || val.length === 0) {
        this.rowIds = []
      } else {
        this.rowIds = val.map((res) => {
          return res.id
        })
      }
    },
    selectionChangeHandler(val) {
      if (val === null || val.length === 0) {
        this.rowChildIds = []
      } else {
        this.rowChildIds = val.map((res) => {
          return res.id
        })
      }
    },
    toParentEdit(data) { this.$refs.entity.openEntity(data) },
    toEdit(data) {
      this.$refs.entity.openEntity(data)
    },
    Delete(data) {
      if (data.id !== null && undefined !== data.id) { // 单个删除
        this.rowChildIds = []
        this.rowChildIds.push(data.id)
        this.$confirm('此操作将永久删除' + data.title + ', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteEntity(this.rowChildIds).then(res => {
            this.$message.success('删除成功！')
            this.initChild()
            this.rowIds = []
          }).catch(() => {
            this.$message.error('删除失败！')
          })
        }).catch(() => {
          this.$message.success('取消删除成功！')
        })
      } else {
        if (this.rowChildIds === null || this.rowChildIds.length === 0) {
          this.$message.info('请选择删除项！')
        } else {
          this.$confirm('此操作将永久删除选中记录，是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            deleteEntity(this.rowChildIds).then(res => {
              this.$message.success('删除成功！')
              this.initChild()
              this.rowChildIds = []
            }).catch(() => {
              this.$message.error('删除失败！')
            })
          }).catch(() => {
            this.$message.success('取消删除成功！')
          })
        }
      }
    },
    handleParentCurrentChange(row) {
      this.parentForm.page = row
      this.initParent()
    },
    handleCurrentChange(row) {
      this.form.page = row
      this.initChild()
    },
    handleSizeChange(row) {
      this.form.size = row
      this.initChild()
    },
    handleParentSizeChange(row) {
      this.parentForm.size = row
      this.initParent()
    },
    initParent() {
      this.parentLoading = true
      queryAllByPager(this.parentForm).then(res => {
        const { data, pagerSize } = res
        this.dataList = data
        this.parentPagerSize = pagerSize
        this.parentLoading = false
      }).catch(() => {
        this.parentLoading = false
      })
    },
    initChild() {
      this.loading = true
      queryAllByPager(this.form).then(res => {
        const { data, pagerSize } = res
        this.childList = data
        this.pagerSize = pagerSize
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    parentRowClick(row, column, event) {
      this.form.pid = row.id
      this.change = row.title
      this.initChild()
    },
    fetchData(data) {
      if (undefined !== data && data !== null && undefined !== data.lb && data.lb !== null) {
        if (data.lb === 1) {
          this.initParent()
        }
        if (data.lb === 2) {
          this.initChild()
        }
      }
    },
    serviceAdd(data) {
      this.$refs.service.openEntity(data)
    }
  }
}
</script>

<style scoped>
.app-container-header{
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: left;
}
.app-container-button {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: left;
  margin-top: 15px;
}
</style>
